<template>
  <div class="analyzeView">
    <div class="resultView">
      <div class="resultLabel">正确答案: {{resultStr}}</div>
      <div class="resultLabel" style="margin-left: 24px">你的选择: {{answerStr}}</div>
    </div>
    <div class="tagLabel" v-if="analyse">解析</div>
    <div class="detailLabel">{{analyse}}</div>
  </div>
</template>

<script>
  export default {
    name: 'AnalyzeItem-m',
    props: ['result', 'answer', 'analyse'],
    computed: {
      resultStr() {
        let list = JSON.parse(this.result)
        return list.join(' ')
      },
      answerStr() {
        let list = this.answer.answer || []

        if (list.length == 0) {
          return '未作答'
        } else {
          return list.sort().join(' ')
        }


      }

    }
  }
</script>

<style scoped>
  .analyzeView {
    padding: 16px;
    background-color: #CDECFF;
  }
  .resultView {
    display: flex;
  }
  .resultLabel {
    font-size: 14px;
    font-weight: bold;
    color: #333333;
  }
  .tagLabel {
    margin-top: 16px;
    font-size: 16px;
    font-weight: bold;
    color: #333333;
  }
  .detailLabel {
    margin-top: 8px;
    font-size: 14px;
    color: #333333;
  }
</style>
